<template>
    <div class="expense">
        <div class="e_title">消费记录</div>
        <div class="e_desc">已消费 <span class="e_num">{{this.info.length > 0 ? this.info.length :0}}</span> 瓶</div>
        <div class="e_tips" v-if="!this.info || this.info.length == 0">
            你还没有扫过瓶盖码
        </div>
        <div class="ex_list" v-for="item in info" v-bind:key="item.id">
            <div class="text">{{item.productName}}</div>
            <div class="text">{{item.updateTime}}</div>
        </div>
    </div>
</template>

<script>

import { Api, Global, Util } from "@utils/global";
export default {
    name: 'ExpenseRecord',
    components:{
        
    },
    data () {
        return {
            info:[]
        }
    },
    mounted(){
        this.getInfo();
        this.init()
    },
    methods:{
        // redirect: Util.redirect,
        init(){
            let _code = Util.getUrlCode().code;
            if(_code){
                Api.ajax({
                    key: "memberCenter",
                    type: "GET",
                    data:{
                        code:_code,
                        // code:'081QFPQg0H4Njt18v4Pg0olEQg0QFPQx',
                        state:'test'
                    }  
                }).then(
                    res => {
                        if (!res) return;
                        // console.log('res',res)
                        this.indexdata = res;
                        Util.storage.set('userInfo', res);
                    },
                    res => {
                    // console.log(res);
                    //
                    }
                );
            }else{
                // 获取code
                // console.log(Global.getAuthorizeUrl())
                // Global.getAuthorizeUrl();
                window.location.href = Global.getAuthorizeUrl();
            }
        },
        getInfo(){
            let _user = Util.storage.get('userInfo');
            Api.ajax({
                key: "getPurchaseHistoryListByMemberId",
                type: "GET",
                data: {
                    memberId:_user.id
                    // memberId:10
                }
            }).then(res => {
                this.info = res == null ?[]:res;
                // this.info = [
                //     {
				// 		"alcoholContent": "52%(VOL)",
				// 		"batchNumber": "000001",
				// 		"createTime": "2020-05-22 19:11:48",
				// 		"createUser": null,
				// 		"delFlag": false,
				// 		"id": 1,
				// 		"laserCode": "0000000001",
				// 		"memberId": 10,
				// 		"netContent": "500ml",
				// 		"productName": "小封坛（经典）",
				// 		"updateTime": "2020-05-22 19:11:48",
				// 		"updateUser": null
				// 	},
				// 	{
				// 		"alcoholContent": "52%(VOL)",
				// 		"batchNumber": "000001",
				// 		"createTime": "2020-05-22 19:13:24",
				// 		"createUser": null,
				// 		"delFlag": false,
				// 		"id": 2,
				// 		"laserCode": "0000000002",
				// 		"memberId": 10,
				// 		"netContent": "500ml",
				// 		"productName": "小封坛（高端）",
				// 		"updateTime": "2020-05-22 19:13:24",
				// 		"updateUser": null
				// 	}
                // ]
            })
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
    .expense{
        padding: 30px 20px;
        .e_title{
            color: #ccb484;
            font-size: 33px;
            line-height: 76px;
            
        }
        .e_desc{
            color: #fff;
            font-size: 24px;
            line-height: 58px;
            border-bottom: 1px solid #727171;
            .e_num{
                font-size: 38px;
                color: #fff;
            }
        }
        .e_tips{
            width: 100%;
            height: 80vh;
            line-height: 80vh;
            text-align: center;
            color: #aaaaaa;
        }
        .ex_list{
            display: flex;
            justify-content: space-between;
            line-height: 80px;
            .text{
                color: #fff;
            }
        }
    }
</style>
